<template>
    <el-config-provider :locale="locale">
        <el-date-picker 
            :style="{ width:data.fullWidth ? '100%' : 'auto' }"
            class="flex-datepicker" 
            :type="data.type || 'date'" 
            :placeholder="data.placeholder || ''" 
            :clearable="data.clearable"
            v-model="form[data.paramKey]"
            :disabled-date="data.checkDisabledDate"
            range-separator="至"
            :start-placeholder="data.startPlaceholder || '开始时间' "
            :end-placeholder="data.endPlaceholder || '结束时间' "
        >
        </el-date-picker>
    </el-config-provider>
</template>
<script setup>
    import { watch, ref, computed } from 'vue';
    import locale from 'element-plus/es/locale/lang/zh-cn';

    const props = defineProps({
        form:{ type:Object },
        data:{ type:Object }, 
    });
   
</script>
<style lang="scss">
    .flex-datepicker.el-date-editor {
        // width:100%;
        width:14vw;
        height:var(--baseHeight);
        font-size:var(--baseFontSize);
        line-height:var(--baseHeight);
        .el-input__wrapper {
            padding:0 var(--sPadding);
            input {
                font-size:var(--baseFontSize);
                height:var(--baseHeight);
                line-height:var(--baseHeight);
            }
        }
    }
    .flex-input.el-textarea {
        height:calc( 2 * var(--baseHeight));
        line-height:calc( 2 * var(--baseHeight));
    }
</style>

